<template>
    <div>
        <div class="box">
            <div class="search">
                <van-icon name="arrow-left" color="#999999" size="18px" @click="handlego"/>
                <div class="input">
                    <van-icon name="search" size="20px"/>
                    <input type="text" placeholder="满66包邮，输入名称查询" @focus="handleJump">
                </div>
                <span>搜索</span>
            </div>
            <div class="cont">
                <div class="tab">
                    <ul>
                        <li :class="idx==0?'active':''" @click="handleTab(0)">最新</li>
                        <li :class="idx==1?'active':''" @click="handleTab(1)">销量</li>
                        <li :class="idx==2?'active':''" @click="handleTab(2)">评论</li>
                        <li :class="idx==3?'active':''" @click="handleTab(3)">
                            <span>价格</span>
                            <span>
                                <van-icon name="arrow-up" size="12px" :color="idx==3?'#00d3c2':''"/>
                                <van-icon name="arrow-down" size="12px"/>
                            </span>
                        </li>
                        <li>
                            <van-icon @click="isshow=!isshow" v-if="isshow" name="apps-o" size="25px"/>
                            <van-icon @click="isshow=!isshow" v-else name="wap-nav" size="25px"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="goodlist">
            <Goodrow :obj="{num,idx}" v-if="isshow"/>
            <Goodcol :obj="{num,idx}" v-else/>
        </div>
    </div>
</template>

<script>
    import Goodrow from './Goodsrow.vue'
    import Goodcol from './Goodcol.vue'
    export default {
        components: {
            Goodrow,
            Goodcol
        },
        data() {
            return {
                isshow:true,
                tab: [
                    {}
                ],
                idx:0,
                num:3
            }
        },
        methods: {
            handleJump() {
                this.$router.push('/search')
            },
            handleTab(idx){
                this.idx = idx
            },
            handlego(){
                this.$router.go(-1)
            }
        },
        created () {
            let {num} = this.$route.params
            // console.log(num);
            this.num = num
        },
    }
</script>

<style src="../assets/css/search.css" scoped></style>
<style src="../assets/css/goodlist.css" scoped></style>
